﻿<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>World3D View</title>
    <script src="scripts/three.js"></script>
    <script src="scripts/dat.gui.js"></script>

    <script>
        // Function to setup Three.js scene
        function init() {
            var scene = new THREE.Scene();
            var renderer = new THREE.WebGLRenderer();
            
            // Set rendere initial properties
            // TODO load this from the World properties
            renderer.setClearColor(new THREE.Color(0xFFFFFF, 1.0));
            renderer.setSize(window.innerWidth, window.innerHeight);

            scene.add(loadSurfaceMesh());
            addLighting(scene);
            var camera = addPerspectiveCamera(scene);
            loadEntities(scene);

            // add the output of the renderer to the html element
            document.getElementById("WebGL-Output").appendChild(renderer.domElement);

            //requestAnimationFrame(render);
            renderer.render(scene, camera);
        }

        // Load entities into scene
        // TODO load these from the World3D properties
        function loadEntities(scene) {
            var planeGeometry = scene.getObjectByName("surface").geometry;
            var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
            var cubeMaterial = new THREE.MeshLambertMaterial({ color: 0x00ee22 });
            for (var j = 0; j < (planeGeometry.parameters.height / 5) ; j++) {
                for (var i = 0; i < planeGeometry.parameters.width / 5; i++) {
                    var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

                    cube.position.z = -((planeGeometry.parameters.height) / 2) + 2 + (j * 5);
                    cube.position.x = -((planeGeometry.parameters.width) / 2) + 2 + (i * 5);
                    cube.position.y = 2;

                    scene.add(cube);
                }
            }
        }

        function addPerspectiveCamera(scene) {
            var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
            camera.position.x = 120;
            camera.position.y = 60;
            camera.position.z = 180;

            camera.lookAt(scene.position);
            scene.add(camera);
            return camera;
        }

        // Load the surface mesh for our world
        function loadSurfaceMesh() {
            // TODO load surface mesh from the world properties
            var planeGeometry = new THREE.PlaneGeometry(180, 180);
            var planeMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });
            var plane = new THREE.Mesh(planeGeometry, planeMaterial);
            plane.name = "surface";
            // rotate and position the plane
            plane.rotation.x = -0.5 * Math.PI;
            plane.position.x = 0;
            plane.position.y = 0;
            plane.position.z = 0;

            return plane;
        }

        // Add lighting to the scene
        function addLighting(scene)
        {
            var directionalLight = new THREE.DirectionalLight(0xffffff, 0.7);
            directionalLight.position.set(-20, 40, 60);
            scene.add(directionalLight);

            // add subtle ambient lighting
            var ambientLight = new THREE.AmbientLight(0x0c0c0c);
            scene.add(ambientLight);
        }

        window.onload = init;
    </script>
</head>
<body>
    <div id="WebGL-Output"></div>
</body>
</html>